<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--  -->
		<style>
			.slider{
				width: 500px;
				height: 500px;
				margin: 0 auto;
				background-color: pink;
			}
			.slider .wraper
			{
				width: 500px;
				height: 430px;
				border: 1px solid red;
			}
			.wraper img{
				width: 500px;
				height: 430px;
			}
			footer{
				height: 60px;
				width: 500px;
				border: 1px solid #000;
				margin-top: 6px;
			}
			footer p{
				/* line-height: 60px; */
				text-align: center;
			}
			
		</style>
			
	</head>
	<body>
		<div class="slider">
			<!-- 图片区域 -->
			<div class="wraper">
				<img src="./2.jpg" alt="">
			</div>
			<!--脚部地区 -->
			<footer>
				<p>测试内容</p>
			</footer>
		</div>
		<script>
			let data=[
				{url:'./2.jpg',title:'最好的玫瑰送老婆',color:'orange'},
				{url:'./3.jpg',title:'最好的玫瑰送女友',color:'#fffa44'},
				{url:'./4.jpg',title:'最好的花送老师',color:'#ff9809'},
				{url:'./5.jpg',title:'最好的牡丹送母亲',color:'pink'},
				{url:'./6.jpg',title:'最好的菊花送哈哈',color:'yellow'},
				{url:'./7.jpg',title:'最好的粉玫瑰送张三',color:'grey'},
				{url:'./8.jpg',title:'最好的玫瑰送李四',color:'#fff'},
				{url:'./9.jpg',title:'最好的玫瑰送网二',color:'#ffb891'}
			]
			let i=0;
			setInterval(function(){
				// 获取一个随机数
				let radom=Math.floor(Math.random()*data.length);
				console.log(data[radom]);
				// data[radom]就是获取到data里面对象，然后就可以使用数组的方式获取到对象里面的属性值：对象.属性值
				// 利用DOM获取图片元素
				const im =document.querySelector('.wraper img');
				// alert(im)
				// console.log(img);
				// 利用src插入图片
				im.src=data[radom].url;
				// 切换文字
				// 获取字体元素
				const p=document.querySelector('footer p');
				p.innerHTML=data[radom].title;	
				// 切换颜色
				// 获取元素
				const footer=document.querySelector('footer');
				footer.style.backgroundColor=data[radom].color;
			},2000);
			
			// fconst color=document.querySelector('')
		</script>
	</body>
</html>